<script setup>
import { addAssetCategory, getAssetCategory, updateAssetCategory } from "@/api/asset/assetCategory.js";
import CategorySelect from "@/components/Asset/CategorySelect.vue";

const openFlag = ref(false);

const formDataInit = {
  parentId: null,
  name: null,
  orderNo: null,
  remark: null
}

const { proxy } = getCurrentInstance();

const emit = defineEmits(['sub']);

const isEdit = ref(false);

const formData = reactive({ ...formDataInit });
const form = ref();

const rules = {
  name: [
    { required: true, message: "分类名称不能为空", trigger: "blur" }
  ],
}

const title = computed(() => {
  return isEdit.value ? '编辑' : '添加分类'
});

function reset() {
  Object.assign(formData, formDataInit);
}

function open(row) {
  openFlag.value = true;
  reset();
  if (row) {
    isEdit.value = true;
    getAssetCategory(row.id).then(response => {
      Object.assign(formData, response);
    }).catch(error => {
      console.log(error);
    });
  } else {
    isEdit.value = false;
  }
}

async function submitForm() {
  form.value.validate(valid => {
    if (valid) {
      const isEditValue = isEdit.value;
      const submitMethod = isEditValue ? updateAssetCategory : addAssetCategory;

      submitMethod(formData).then(() => {
        proxy.$message.success(`${title.value}成功`);
        emit('sub');
        close();
      }).catch(() => {
        proxy.$message.error(`${title.value}失败`);
      });
    }
  });
}

function close() {
  openFlag.value = false;
  reset();
}

defineExpose({
  open
})
</script>

<template>
  <div>
    <!-- 添加或修改资产分类表对话框 -->
    <el-dialog :title="title" v-model="openFlag" width="40%" append-to-body>
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px" class="dialog-form-two">
        <el-row gutter="20">
          <el-col :span="24">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model.trim="formData.name" placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类编码" prop="number">
              <el-input disabled v-model.trim="formData.number" placeholder="自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级分类" prop="number">
              <category-select v-model="formData.parentId"></category-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="显示排序" prop="orderNo">
              <el-input v-model.trim="formData.orderNo" placeholder="请输入显示排序" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model.trim="formData.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.dialog-form-two {
  padding: 20px;
}

.dialog-footer {
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-input {
  min-width: 300px;
}
</style>
